<template>
  <view class="task-item">
    <u-card
      :show-head="false"
      border-radius="32"
      margin="20rpx 30rpx"
      @click="gotoDetails()"
    >
      <view slot="body">
        <view class="font-bold u-font-32 u-m-b-20 u-line-3 u-text-color">
          <text class="text-primary" v-if="[1, 2].includes(info.todoType)"
            >【{{ info.projectType }}】</text
          >
          <template>
            <template v-if="[4].includes(info.todoType)">
              <text class="text-primary"
                >【{{ CONTRACT_TYPES_MAP[info.businessType]?.label }}】</text
              >{{ info.businessName }}</template
            >
            <template v-else-if="[5].includes(info.todoType)"
              >经费入账</template
            >
            <template v-else-if="[6].includes(info.todoType)">{{
              info.businessSubName
            }}</template>
            <template v-else-if="[7].includes(info.todoType)"
              >经费调整</template
            >
            <template v-else>{{ info.businessName }}</template>
          </template>
        </view>
        <slot name="body" :data="info"></slot>
      </view>
      <view slot="foot">
        <view class="u-flex u-row-between u-padding-20 u-p-l-32 u-p-r-32">
          <u-tag
            shape="circle"
            :text="TodoListMap[info.todoType - 1]?.label ?? ''"
            :bg-color="TodoListMap[info.todoType - 1]?.bgColor ?? ''"
            :color="TodoListMap[info.todoType - 1]?.borderColor ?? ''"
            border-color="transparent"
          />
          <view>
            <u-text
              v-if="!info.businessSubStatus"
              :class="[
                'u-type-' +
                  TodoListMap[info.todoType - 1]?.status[info.businessStatus]
                    ?.color,
                'font-bold',
              ]"
              >{{
                TodoListMap[info.todoType - 1]?.status[info.businessStatus]
                  ?.label
              }}</u-text
            >
            <u-text
              v-if="info.businessSubStatus"
              :class="[
                'u-type-' +
                  TodoListMap[info.todoType - 1]?.status[info.businessSubStatus]
                    ?.color,
                'font-bold',
              ]"
              >{{ TodoListMap[info.todoType - 1]?.subName
              }}{{
                TodoListMap[info.todoType - 1]?.status[info.businessSubStatus]
                  ?.label
              }}</u-text
            >
          </view>
        </view>
        <!-- 电子签署会有独有的说明字段 -->
        <view
          v-if="info.businessSubName && info.todoType === 17"
          class="error u-p-l-20 u-p-r-20 u-p-b-20"
          >说明：{{ info.businessSubName }}</view
        >
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { TodoListMap } from './index';
import { getProjectDetails } from '@/api/modules/project';
import { CONTRACT_TYPES_MAP } from '@/enums/financeEnum';
const props = defineProps<{
  info: any;
  tabType: any;
}>();

const { info, tabType } = toRefs(props);

// const TodoListMap = ref(getTodoListMap(optionList));

const gotoDetails = () => {
  let routerName = TodoListMap[info.value.todoType - 1].routerName;
  if (info.value.todoType === 17) {
    // 电子签署中
    // projectType： '0':任务 '1': 申请单
    if (info.value.projectType === '0') {
      routerName = TodoListMap[2].routerName;
    } else if (info.value.projectType === '1') {
      routerName = TodoListMap[0].routerName;
    }
  }
  if (routerName) {
    // 任务类型
    if (
      info.value.todoType === 3 ||
      (info.value.todoType === 17 && info.value.projectType === '0')
    ) {
      // 暂不支持主合同，付款登记，伦理初始审查任务类型的查看
      if ([8, 10, 14].includes(info.value.businessType)) {
        uni.showToast({
          title: '小程序暂不支持，请前往pc端查看/操作',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      getProjectDetails({ projectId: info.value.projectId }).then((res) => {
        (uni as any).$Router.push({
          name: routerName,
          params: {
            taskId: info.value.businessId,
            projectInfo: res,
            label: TodoListMap[info.value.todoType - 1].label,
            tab: info.value.todoType === 17 ? 'filelist' : '',
          },
        });
      });
    } else {
      if (info.value.todoType === 17 && info.value.projectType === '1') {
        (uni as any).$Router.push({
          name: routerName,
          params: {
            taskId: info.value.projectId,
            supplementFile: true,
            label: TodoListMap[info.value.todoType - 1].label,
            tab: 'filelist',
          },
        });
        return;
      }
      const finance = [4, 5, 6, 7];
      // 合同管理\经费入账\经费支出\经费调整
      if (finance.includes(info.value.todoType)) {
        toFinance(routerName);
        return;
      }
      (uni as any).$Router.push({
        name: routerName,
        params: {
          taskId: info.value.businessId,
          supplementFile: true,
          label: TodoListMap[info.value.todoType - 1].label,
        },
      });
    }
  } else {
    uni.showToast({
      title: '正在开发，敬请期待',
      icon: 'none',
      duration: 2000,
    });
  }
};
const toFinance = (routerName: any) => {
  // 待我审批tab中，除待审批以外，其余不能进入
  if (
    tabType.value === 1 &&
    !(info.value.businessStatus === 3 || info.value.businessSubStatus === 3)
  ) {
    uni.showToast({
      title: '暂不支持此状态的操作，请前往PC端进行处理',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  (uni as any).$Router.push({
    name: routerName,
    params: {
      data: {
        taskId: info.value.businessId,
        projectId: info.value.projectId,
        contractPaperId: info.value.businessSubId,
        taskType: info.value.businessType,
      },
    },
  });
};
</script>
<style lang="scss" scoped>
.task-item {
  overflow: hidden;

  & :first-child {
    margin-top: 0 !important;
  }
  .text-primary {
    color: $u-type-primary;
  }
}
</style>
